<template>
    <l-page>
        <l-navbar :title="detail.name"></l-navbar>
        <view class="shadow rounded mt-3 mx-3 overflow-hidden">
            <u-image width="100%" height="180" :src="$imgBase + settings.other_banners.loan.url"></u-image>
        </view>
        <view class="panel shadow">
            <l-select label="产品" v-model="formData.product_type" :list="product_types"
                v-if="product_types.length"></l-select>
            <l-selects label="所在地区" class="mt-3" :list="areas" returnType="string" v-model="formData.area"></l-selects>
            <l-input label="申请人姓名" class="mt-3" v-model="formData.realname"></l-input>
            <l-input label="联系电话" class="mt-3" v-model="formData.mobile"></l-input>
            <l-input label="申请金额" class="mt-3" v-model="formData.loan_amount" suffix="万元"></l-input>
            <l-select label="贷款年限" class="mt-3" v-model="formData.loan_term" :list="贷款年限"></l-select>
            <l-select label="贷款用途" class="mt-3" v-model="formData.purpose" :list="settings.dict_purpose"></l-select>
            <l-select label="进阶条件" class="mt-3" v-model="formData.advanced" :list="进阶条件"></l-select>
            <template v-if="formData.advanced == 'work'">

                <view class="text-center mt-3">
                    ——工作信息——
                </view>
                <l-select label="月收入" class="mt-3" v-model="formData.monthly_income"
                    :list="settings.dict_monthly_income"></l-select>
                <l-input label="工作单位" class="mt-3" v-model="formData.company_name"></l-input>
                <l-select label="单位性质" class="mt-3" v-model="formData.company_type"
                    :list="settings.dict_company_type"></l-select>
                <l-select label="征信状况" class="mt-3" v-model="formData.credit_status" :list="征信状况"></l-select>
                <view class="mt-3 flex items-center">
                    <view class="mr-2 l-label">是否银行代发工资</view>
                    <u-radio-group v-model="formData.is_bank_pay">
                        <u-radio shape="circle" label="是" :name="1"></u-radio>
                        &emsp;
                        <u-radio shape="circle" label="否" :name="0"></u-radio>
                    </u-radio-group>
                </view>
                <view class="mt-3 flex items-center">
                    <view class="mr-2 l-label">是否缴纳公积金</view>
                    <u-radio-group v-model="formData.has_hff">
                        <u-radio shape="circle" label="是" :name="1"></u-radio>
                        &emsp;
                        <u-radio shape="circle" label="否" :name="0"></u-radio>
                    </u-radio-group>
                </view>
                <view class="mt-3 flex items-center">
                    <view class="mr-2 l-label">是否缴纳个税</view>
                    <u-radio-group v-model="formData.has_iit">
                        <u-radio shape="circle" label="是" :name="1"></u-radio>
                        &emsp;
                        <u-radio shape="circle" label="否" :name="0"></u-radio>
                    </u-radio-group>
                </view>
                <view class="mt-3 flex items-center">
                    <view class="mr-2 l-label">在本市是否有房产</view>
                    <u-radio-group v-model="formData.has_local_house">
                        <u-radio shape="circle" label="是" :name="1"></u-radio>
                        &emsp;
                        <u-radio shape="circle" label="否" :name="0"></u-radio>
                    </u-radio-group>
                </view>

                <view class="mt-3 flex items-center" v-if="formData.has_local_house == 1">
                    <view class="mr-2 l-label">是否抵押</view>
                    <u-radio-group v-model="formData.mortgaged">
                        <u-radio shape="circle" label="是" :name="1"></u-radio>
                        &emsp;
                        <u-radio shape="circle" label="否" :name="0"></u-radio>
                    </u-radio-group>
                </view>
                <l-input label="房货月供" v-if="formData.mortgaged == 1" class="mt-3" v-model="formData.monthly_payment"
                    suffix="元"></l-input>
            </template>
            <template v-if="formData.advanced == 'house'">
                <view class="text-center mt-3">
                    ——房产信息——
                </view>
                <l-selects label="所在地区" class="mt-3" :list="areas" returnType="string"
                    v-model="formData.house_area"></l-selects>
                <l-input label="物业地址" class="mt-3" v-model="formData.address"></l-input>
                <l-input label="建筑面积" class="mt-3" v-model="formData.floor_area"></l-input>
                <l-input label="房产价值" class="mt-3" v-model="formData.house_value"></l-input>
                <l-select label="房屋用途" class="mt-3" v-model="formData.property_usage" :list="房屋用途"></l-select>
                <l-select label="房屋属性" class="mt-3" v-model="formData.property_type" :list="房屋属性"></l-select>
                <view class="mt-3 flex items-center">
                    <view class="mr-2 l-label">是否抵押</view>
                    <u-radio-group v-model="formData.house_mortgaged">
                        <u-radio shape="circle" label="是" :name="1"></u-radio>
                        &emsp;
                        <u-radio shape="circle" label="否" :name="0"></u-radio>
                    </u-radio-group>
                </view>
                <template v-if="formData.house_mortgaged == 1">
                    <l-input label="月供金额" class="mt-3" v-model="formData.house_monthly_payment"></l-input>
                    <l-input label="抵押银行" class="mt-3" v-model="formData.mortgage_lender"></l-input>
                </template>
            </template>
            <l-button class="mt-3" @tap="apply" ref="btn">申请</l-button>
        </view>
        <view class="mt-3 bg-white p-3">
            <view>贷款流程</view>
            <u-steps :current="0">
                <u-steps-item title="线上申请"></u-steps-item>
                <u-steps-item title="客服联系"></u-steps-item>
                <u-steps-item title="业务受理"></u-steps-item>
                <u-steps-item title="贷款发放"></u-steps-item>
            </u-steps>
        </view>
    </l-page>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import Settings from "@/stores/settings"
import Loan from "@/stores/loan"
import { onLoad } from "@dcloudio/uni-app";
let settings = Settings();

let formData = reactive({
    loan_id: undefined,
    product_type: undefined,
    realname: '',
    mobile: '',
    loan_amount: '',
    loan_term: '',
    area: '',
    purpose: '',
    advanced: '',
    monthly_income: '',
    company_name: '',
    company_type: '',
    credit_status: '',
    is_bank_pay: '',
    has_hff: '',
    has_iit: '',
    has_local_house: 0,
    mortgaged: 0,
    monthly_payment: '',
    house_area: undefined,
    address: '',
    floor_area: '',
    house_value: '',
    property_usage: '',
    property_type: '',
    house_mortgaged: 0,
    house_monthly_payment: '',
    mortgage_lender: '',
    salesman_id: ''
}), detail = ref<any>({}), salesman_id: string;
let product_types = ref([])
onLoad((query: any) => {
    formData.loan_id = query.id
    formData.salesman_id = query.salesman_id
    salesman_id = query.salesman_id
    Loan().getProductdetail(query.id).then((res: any) => {
        res.product_type && (product_types.value = res.product_type?.map((item: any) => ({ label: item.name, value: item.value })))
        detail.value = res
    })
})

let areas = ref<any[]>([]);
let getArea = async () => {
    areas.value = await settings.getRegions()
}
getArea()

const objToList = (obj: Object) => {
    return Object.entries(obj).map(item => ({ label: item[1], value: item[0] }))
}
const loan = Loan()
const 进阶条件 = objToList(loan.进阶条件);
const 征信状况 = objToList(loan.征信状况);
const 贷款年限 = loan.贷款年限;
const 房屋用途 = objToList(loan.房屋用途);
const 房屋属性 = objToList(loan.房屋属性);

const btn = ref()
let apply = () => {
    btn.value.showLoading()
    Loan().apply({ ...formData }).then((res: any) => {
        loan.toNextPage(res, 0, salesman_id)
    }).finally(() => { btn.value.hideLoading() })
}
</script>
<style scoped lang="scss">
:deep(.l-input-label),
:deep(.l-select-label) {
    min-width: 5em;
    text-align-last: justify;

}

.l-label {
    width: 230rpx;
}
</style>